<template>
	<div class="unit">
		<el-descriptions border>
			<el-descriptions-item label="项目编码">{{ message?.base?.appCode || '' }}</el-descriptions-item>
			<el-descriptions-item label="数字化应用名称">{{ message?.base?.appName || '' }}</el-descriptions-item>
			<el-descriptions-item label="负责人姓名">{{ message?.base?.principalName || '' }}</el-descriptions-item>
			<el-descriptions-item label="负责人电话">{{ message?.base?.principalPhone || '' }}</el-descriptions-item>
			<el-descriptions-item label="应用开发类型">{{ dictionary.projectType(message?.base?.projectType) || '' }}</el-descriptions-item>
			<el-descriptions-item label="行业地图(专题地图)开发情况">{{
				dictionary.developStatus(message?.base?.developStatus) || ''
			}}</el-descriptions-item>
			<el-descriptions-item label="应用预算年度">{{ message?.base?.budgetYear || '' }}</el-descriptions-item>
			<el-descriptions-item label="应用开发起始时间">{{ message?.base?.developBeginDate || '' }}</el-descriptions-item>
			<el-descriptions-item label="应用开发终止时间">{{ message?.base?.developEndDate || '' }}</el-descriptions-item>
			<el-descriptions-item label="应用领域">{{ message?.base?.domain || '' }}</el-descriptions-item>
			<el-descriptions-item label="是否涉及执法监督等相关事项">{{ dictionary.isYN(message?.base?.supervise) || '' }}</el-descriptions-item>
			<el-descriptions-item label="是否提交纸质件">{{ dictionary.isYN(message?.base?.paper) || '' }}</el-descriptions-item>
			<el-descriptions-item :span="3" label="应用发布端(多选)">{{ dictionary.terminal(message?.base?.terminal) || '' }}</el-descriptions-item>
			<el-descriptions-item v-if="chengOne(3)" label="支付宝发布时间">{{ message?.base?.zfbIssue || '' }}</el-descriptions-item>
			<el-descriptions-item v-if="chengOne(4)" label="微信发布时间">{{ message?.base?.chatIssue || '' }}</el-descriptions-item>
			<el-descriptions-item v-if="chengOne(5)" label="网页发布时间">{{ message?.base?.webIssue || '' }}</el-descriptions-item>
			<el-descriptions-item v-if="chengOne(6)" label="PC客户端发布时间">{{ message?.base?.pcIssue || '' }}</el-descriptions-item>
			<el-descriptions-item label="应用总预算(万元)">{{ message?.base?.totalBudget || '' }}</el-descriptions-item>
			<el-descriptions-item label="应用年度预算(万元)">{{ message?.base?.yearBudget || '' }}</el-descriptions-item>
			<el-descriptions-item :span="3" label="应用申报依据">{{ message?.base?.according || '' }}</el-descriptions-item>
			<el-descriptions-item :span="3" label="应用概述">{{ message?.base?.summarize || '' }}</el-descriptions-item>
			<el-descriptions-item :span="3" label="资金来源">{{ dictionary.fundResource(message?.base?.fundResource) || '' }}</el-descriptions-item>
			<el-descriptions-item v-if="chengTwe(6)" label="其他来源名称">{{ message?.base?.otherFund || '' }}</el-descriptions-item>
			<el-descriptions-item v-if="chengTwe(1)" label="中央财政资金(万元)">{{ message?.base?.centerAmount || '' }}</el-descriptions-item>
			<el-descriptions-item v-if="chengTwe(2)" label="市级财政资金(万元)">{{ message?.base?.cityAmount || '' }}</el-descriptions-item>
			<el-descriptions-item v-if="chengTwe(3)" label="区县财政资金(万元)">{{ message?.base?.districtAmount || '' }}</el-descriptions-item>
			<el-descriptions-item v-if="chengTwe(4)" label="部门自筹资金(万元)">{{ message?.base?.deptAmount || '' }}</el-descriptions-item>
			<el-descriptions-item v-if="chengTwe(5)" label="银行贷款等投资(万元)">{{ message?.base?.bankAmount || '' }}</el-descriptions-item>
			<el-descriptions-item v-if="chengTwe(6)" label="其他(万元)">{{ message?.base?.otherAmount || '' }}</el-descriptions-item>
		</el-descriptions>
		<el-descriptions :column="1" border>
			<el-descriptions-item label="应用总预算明细">
				<div>
					<el-button @click="detaExpo" type="primary" style="margin-bottom: 5px; width: 80px">导出</el-button>
					<totalTable :tableData="message?.budget" />
				</div>
			</el-descriptions-item>
		</el-descriptions>
		<!-- 网资源信息 -->
		<div class="netSor">
			<cardSme title="网资源信息" v-if="message?.net?.netResource">
				<el-descriptions :column="1">
					<el-descriptions-item label="网络资源类型(多选):">{{ dictionary.netResource(message?.net?.netResource) }} </el-descriptions-item>
				</el-descriptions>
				<div v-for="(item, index) in message?.net?.netList" :key="index">
					<cardSme title="部门专网" v-if="item.type == 3">
						<el-descriptions :column="1" border>
							<el-descriptions-item label="申请依据">{{ item.according }} </el-descriptions-item>
							<el-descriptions-item label="预算金额">{{ item.budget }} </el-descriptions-item>
							<el-descriptions-item label="相关附件(佐证材料)"><FilePreview :type="'view'" v-model="item.files" /> </el-descriptions-item>
						</el-descriptions>
					</cardSme>
					<cardSme title="部门专线" v-if="item.type == 4">
						<el-descriptions :column="1" border>
							<el-descriptions-item label="申请依据">{{ item.according }} </el-descriptions-item>
							<el-descriptions-item label="本端名称">{{ item.selfName }} </el-descriptions-item>
							<el-descriptions-item label="对端名称">{{ item.oppositeName }} </el-descriptions-item>
							<el-descriptions-item label="预算金额">{{ item.budget }} </el-descriptions-item>
							<el-descriptions-item label="相关附件(佐证材料)"><FilePreview :type="'view'" v-model="item.files" /> </el-descriptions-item>
						</el-descriptions>
					</cardSme>
					<cardSme title="互联网专线" v-if="item.type == 5">
						<el-descriptions :column="1" border>
							<el-descriptions-item label="申请依据">{{ item.according }} </el-descriptions-item>
							<el-descriptions-item label="本端名称">{{ item.selfName }} </el-descriptions-item>
							<el-descriptions-item label="预算金额">{{ item.budget }} </el-descriptions-item>
							<el-descriptions-item label="相关附件(佐证材料)"><FilePreview :type="'view'" v-model="item.files" /> </el-descriptions-item>
						</el-descriptions>
					</cardSme>
					<cardSme title="电子政务外网部门接入网" v-if="item.type == 6">
						<el-descriptions :column="1" border>
							<el-descriptions-item label="本端名称">{{ item.selfName }} </el-descriptions-item>
							<el-descriptions-item label="对端名称">{{ item.oppositeName }} </el-descriptions-item>
							<el-descriptions-item label="情况说明">{{ item.condition }} </el-descriptions-item>
							<el-descriptions-item label="预算金额">{{ item.budget }} </el-descriptions-item>
							<el-descriptions-item label="相关附件(佐证材料)"><FilePreview :type="'view'" v-model="item.files" /> </el-descriptions-item>
						</el-descriptions>
					</cardSme>
				</div>
			</cardSme>
			<!-- 总体 -->
			<el-descriptions :column="2" border>
				<el-descriptions-item label="总体业务架构图(上传总体业务架构图)">
					<FilePreview :type="'view'" v-model="imgArray.imgs.businessImg" />
				</el-descriptions-item>
				<el-descriptions-item label="系统架构图(上传系统架构图)">
					<FilePreview :type="'view'" v-model="imgArray.imgs.systemImg" />
				</el-descriptions-item>
				<el-descriptions-item label="数据流向图(上传数据流向图)">
					<FilePreview :type="'view'" v-model="imgArray.imgs.dataImg" />
				</el-descriptions-item>
				<el-descriptions-item label="网络拓扑图(上传网络拓扑图)">
					<FilePreview :type="'view'" v-model="imgArray.imgs.netImg" />
				</el-descriptions-item>
				<el-descriptions-item :span="2" label="业务事项清单">
					<FilePreview :type="'view'" v-model="imgArray.imgs.matter" />
				</el-descriptions-item>
				<el-descriptions-item :span="2" label="网络拓扑图(上传网络拓扑图)">
					<FilePreview :type="'view'" v-model="imgArray.imgs.fundReport" />
				</el-descriptions-item>
			</el-descriptions>
		</div>
	</div>
</template>

<script lang="ts" setup>
import dictionary from './dictionary.js';
import totalTable from './component/totalTable.vue';
import cardSme from './cardSme.vue';
import cardImg from './component/cardImg.vue';
import textImg from './component/textImg.vue';
import FilePreview from '/@/components/HyUpload/index.vue';
import { detaExport } from '/@/api/decManagement/detail';
import { toRefs, defineProps, computed, watch, ref } from 'vue';
import { deepClone } from '/@/utils/other';

const props = defineProps({
	messages: Object,
});

//网资源信息这块显示
const showNetResource: any = (item: any) => {
	let datas = ['', '电子政务外网', '无网络资源', '部门专网', '部门专线', '互联网专线', '电子政务外网部门接入网'];
	return datas[item];
};
//imgArray
const imgArray: any = ref({
	imgs: {},
});
let message: any = ref();
watch(
	() => props.messages,
	(newVal: any) => {
		let data = {
			businessImg: [newVal?.net.businessImg],
			systemImg: [newVal?.net.systemImg],
			dataImg: [newVal?.net.dataImg],
			netImg: [newVal?.net.netImg],
			matter: newVal?.net.matter,
			fundReport: newVal?.net.fundReport,
		};

		imgArray.value.imgs = data;
		//赋值
		message.value = newVal;
	},
	{
		deep: true,
	}
);

//导出表格
const detaExpo = () => {
	let data: any = message?.value?.budget;
	detaExport(data).then((res: any) => {
		// console.log(res);
		let href = window.URL.createObjectURL(res);
		let a = document.createElement('a');
		a.href = href;
		a.download = '总预算明细';
		a.click();
		URL.revokeObjectURL(a.href);
	});
};

const chengOne: any = (item: any) => {
	let arr = message?.value?.base?.terminal || [];
	if (arr.indexOf(item) >= 0) {
		return true;
	} else {
		return false;
	}
};
const chengTwe: any = (item: any) => {
	let arr = message?.value?.base?.fundResource || [];
	if (arr.indexOf(item) >= 0) {
		return true;
	} else {
		return false;
	}
};

const { messages } = toRefs(props);
</script>

<style lang="scss" scoped>
.unit {
	width: 100%;

	.top_box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;

		.item_box {
			width: 30%;
			margin: 5px 0px;
			display: flex;

			.item_name {
				color: #999999;
			}
			.item_content {
				flex: 1;
				word-wrap: break-word;
			}
		}

		.item_box_w {
			width: 100%;
			margin: 5px 0px;
			display: flex;
			flex-wrap: nowrap;

			.item_name {
				color: #999999;
			}
			.item_content {
				flex: 1;
			}
		}
	}

	.netSor {
		.item_box {
			display: flex;
			margin: 10px 0px;

			.item_title {
				color: #999999;
				width: 150px;
				text-align: right;
			}

			.item_content {
				flex: 1;
				padding-left: 5px;
			}
		}

		.bottom_box {
			display: flex;
			flex-wrap: wrap;

			.item_box {
				display: flex;
				margin: 10px 0px;
				width: 45%;

				.item_title {
					color: #999999;
					width: 25%;
					text-align: right;
				}

				.item_content {
					flex: 1;
					padding-left: 5px;
				}
			}
			.item_box_w {
				display: flex;
				margin: 10px 0px;
				width: 100%;
				align-items: center;

				.item_title {
					color: #999999;
					width: 11%;
					text-align: right;
				}

				.item_content {
					padding-left: 5px;
				}
			}
		}
	}
	:deep(.el-descriptions__label) {
		width: 15% !important;
	}
}
</style>
